<style scoped>
/* 针对所有浏览器 */
::-webkit-scrollbar {
	width: 0;
	height: 0;
}

/* 针对 Firefox */
body {
	overflow: scroll;
	scrollbar-width: none; /* 针对 Firefox */
}
.card-item:hover {
	transform: perspective(500px) rotateX(25deg) translateY(-2px) scale(1.1);
}
</style>
<template>
	<div class="h-full flex z-10 overflow-hidden neutral-content">
		<div class="w-1/6 h-full bg-base-200/10 overflow-y-scroll min-w-40">
			<div
				v-for="(item, index) in data.cate"
				class="cursor-pointer hover:bg-base-200"
				@click="navigatoFun(item.id)">
				<div class="flex flex-center items-center w-full h-14 p-3">
					<el-image
						:src="item.image"
						class="w-10 h-10 ml-1"
						lazy></el-image>
					<span class="ml-3">{{ item.name }}</span>
				</div>
			</div>
		</div>
		<!--		<div-->
		<!--			class="h-screen bg-base-200"-->
		<!--			style="width: 1px"></div>-->
		<div class="w-full h-full overflow-y-scroll el-scrollbar__wrap--hidden-default demo-image__lazy">
			<div
				v-for="(item, index) in data.cateItem"
				class="p-3">
				<!--分类标题-->
				<div
					:id="item.id"
					class="w-40 font-bold ml-3 h-12 flex items-center hover:scale-105 justify-center text-slate-500 bg-base-200 rounded-full">
					{{ item.name }}
				</div>
				<!--主体内容-->
				<div
					class="w-full grid justify-evenly gap-2 mt-4"
					style="grid-template-columns: repeat(auto-fill, 9rem)">
					<div
						v-for="item2 in item.list"
						class="card-item transition-all duration-300 h-36 mt-3 origin-center hover:bg-base-200 bg-base-200/80 cursor-pointer rounded-xl flex items-center justify-center flex-col"
						@click="navigatoPath(item2.url)">
						<!--图片-->
						<div class="h-24 w-24">
							<el-image
								:src="item2.image"
								class="h-full w-full rounded-sm z-0"
								lazy
								loading="lazy" />
						</div>
						<!--标题-->
						<div class="text-xs h-6 truncate text-slate-500 w-full pl-3 pr-3 flex justify-center items-end">
							{{ item2.title }}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div v-if="data.loginShow">
			<login-page @receive-login="receiveLogin"></login-page>
		</div>
		<div v-if="data.lodingShow">
			<loading></loading>
		</div>
	</div>
</template>

<script setup>
import { inject, onMounted, ref } from 'vue'
import { postQueryCate, postQueryItem } from '../interface/siteApi.js'
import { getVerifyUser } from '../interface/UserApi.js'
import LoginPage from '../components/loginPage.vue'
import Loading from '../components/loading.vue'

const reload = inject('reload')
const data = ref({
	cate: [],
	cateItem: [],
	user: {},
	loginShow: false, //登录界面
	loginPass: false, //是否跳转
	lodingShow: true //加载动画
})

onMounted(async (e) => {
	//校验是否已经登录
	verifyUser()
	cateItem()
})

/**
 * 获取网页数据
 */
async function cateItem() {
	//获取站点分类
	postQueryCate().then((res) => {
		if (res.code === 200) {
			data.value.cate = res.data
		}
	})
	//获取站点所有数据
	postQueryItem().then((res) => {
		if (res.code === 200) {
			data.value.cateItem = res.data
		}
		data.value.lodingShow = false
	})
}
/**
 * 校验用户是否已经登录
 */
async function verifyUser() {
	getVerifyUser().then((res) => {
		if (res.code === 200) {
			localStorage.setItem('token', res.data)
			data.value.loginPass = true
		}
	})
}
/**
 * (侧边栏跳转)
 */
const navigatoFun = (id) =>
	document.getElementById(id).scrollIntoView({
		behavior: 'smooth'
	})
/**
 * @namespace (跳转站点)
 */
function navigatoPath(e) {
	if (data.value.loginPass) {
		window.open(e, '_blank')
	} else {
		data.value.loginShow = true
	}
}
/**
 * 接收登录状态
 */
function receiveLogin(e) {
	data.value.loginShow = false
	verifyUser()
	reload()
}
</script>
